<template>
  <div class="login">
    <el-carousel height="100vh" class="carousel">
      <el-carousel-item v-for="item in 4" :key="item">
        <img
          width="100%"
          :src="require('../../assets/images/' + item + '.jpg')"
          alt=""
        />
      </el-carousel-item>
    </el-carousel>
    <div class="loginBlock">
      <h3>登录 <span>欢迎使用悦朋软件</span></h3>
      <el-form
        label-position="left"
        lable-width="0px"
        :model="user"
        :rules="rules"
      >
        <el-form-item class="inp" label="" prop="name">
          <el-input
            v-model="user.name"
            placeholder="请输入用户名"
            prefix-icon="el-cion-user"
          ></el-input>
        </el-form-item>
        <el-form-item class="inp" label="" prop="password">
          <el-input
            v-model="user.password"
            show-password
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="inp" label="" prop="yzm">
          <el-input
            v-model="user.yzm"
            placeholder="验证码"
            style="width: 50%"
          ></el-input>
          <img src="http://dida100.com/include/vdimgck.php" alt="" />
        </el-form-item>
        <p>
          <a href="">立即注册</a>
          <a href="">忘记密码？</a>
        </p>
        <el-form-item class="inp">
          <el-button
            type="primary"
            style="width: 100%"
            @click="$store.dispatch('login', user)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: "",
        password: "",
        yzm: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 28,
            message: "长度在 3 到 28个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 28,
            message: "长度在 6 到 28个字符",
            trigger: "blur",
          },
        ],
        yzm: [
          {
            required: true,
            message: "4位数验证码",
            trigger: "blur",
          },
          {
            min: 4,
            max: 4,
            message: "长度4位",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.loginBlock {
  width: 360px;
  height: 360px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 4px #ccc;
  position: absolute;
  right: 200px;
  top: 50%;
  transform: translate(0, -50%);
  box-sizing: border-box;
  z-index: 999999;
  h3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
  }
  .inp {
    width: 80%;
    margin: 1rem auto;
  }
  p {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}
.login {
  width: 100%;
  height: 100vh;
  position: relative;
}
.carousel {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
